<template>
	<div>
		<navigationBar :bgType="4" navigationTitle="服务师端" />

		<view class="wrap paddingBottom" :style="{ '--navigation-height': navigationHeight + 'px' }" v-if="dataInfo">
			<image class="wrap-bg" :src="getImageURL('navigationBar/bg_two.png')" mode="widthFix" />

			<view class="wrap-info flex align-center just-between">
				<image class="avatar" :src="dataInfo.work_image" />

				<view class="info">
					<view class="nickname flex align-center">
						<text class="f-32 limit-num-line">{{ dataInfo.name }}</text>

						<image :src="getImageURL('technician/arrow_white.png')" />
					</view>

					<scroll-view class="authen-bg flex f-26" scroll-x>
						<view class="authen-item" @click="onAuthen">
							{{
								dataInfo.authentication == 0
									? "未认证"
									: dataInfo.authentication == 1
									? "已认证"
									: "认证中"
							}}
						</view>

						<view class="authen-item">{{ dataInfo.level_name }}</view>

						<view class="authen-item">{{ dataInfo.is_service == 1 ? "服务中" : "已休息" }}</view>
					</scroll-view>
				</view>

				<view class="right flex column align-end">
					<view class="switch-img">
						<image v-if="dataInfo.is_update == 1" :src="getImageURL('technician/address_update_on.png')" />
						<image v-else :src="getImageURL('technician/address_update_off.png')" />
					</view>

					<view class="name f-20"> {{ dataInfo.is_update == 1 ? "已开启" : "已关闭" }}自动更新 </view>
				</view>
			</view>

			<view class="address-bg flex align-center f-26">
				<image class="img" :src="getImageURL('technician/address_location.png')" />
				<view class="current"> 当前位置: </view>
				<view class="address limit-num-line">{{ dataInfo.address }}</view>
			</view>

			<view class="options-bg flex">
				<block v-for="(item, index) in options_list" :key="index">
					<view class="options-item">
						<view class="flex column align-center just-center">
							<image class="img" :src="getImageURL(item.file)" />
							<view class="name f-26">{{ item.title }}</view>
						</view>
					</view>
				</block>
			</view>

			<view class="income-bg flex align-center just-between">
				<view class="income-item flex column just-center" @click.stop="onService">
					<view class="name f-28"> 服务收入 </view>
					<view class="num">
						<text class="f-24 symbol">¥</text>
						<text class="f-34 fBold">{{ dataInfo.service_prcie || "0" }}</text>
					</view>
					<view class="withdraw-bg f-26" @click.stop="onCash"> 去提现 </view>
				</view>

				<view class="income-item flex column just-center">
					<view class="name f-28"> 车费结算 </view>
					<view class="num">
						<text class="f-24 symbol">¥</text>
						<text class="fb-34">{{ dataInfo.car_price || "0" }}</text>
					</view>

					<view class="withdraw-bg f-26"> 去提现 </view>
				</view>
			</view>

			<view class="wrap-order-bg">
				<view class="order-title fBold f-28"> 我的订单 </view>

				<view class="order-list flex align-center">
					<block v-for="(item, index) in order_list" :key="index">
						<view class="order-item" @click="onOrderList(item, index)">
							<view class="flex column align-center just-center">
								<view class="file">
									<image class="img" :src="getImageURL(item.file)" />

									<view class="num f-14" v-if="item.num > 0">{{ item.num }}</view>
								</view>

								<view class="title f-24">{{ item.title }}</view>
							</view>
						</view>
					</block>
				</view>
			</view>

			<view class="wrap-tool">
				<view class="tool-title fBold f-28"> 我的工具 </view>

				<view class="tool-list flex">
					<block v-for="(item, index) in tool_list" :key="index">
						<view class="tool-item flex column align-center just-center" @click="$handle(item)">
							<image class="img" :src="getImageURL(item.file)" />
							<view class="title f-24"> {{ item.title }} </view>
						</view>
					</block>
				</view>
			</view>
		</view>

		<technicianAuthenPop />
	</div>
</template>

<script>
	import { getTechnicianInfo } from "@/API/mine.js";
	import technicianAuthenPop from "@/components/mine/technician_authen_pop.vue";
	export default {
		components: {
			technicianAuthenPop,
		},
		props: {
			userStatus: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				navigationHeight: this.$navigationHeight,

				dataInfo: null,
				options_list: [
					{
						title: "位置更新",
						file: "technician/address_update.png",
						handle: () => {},
					},
					{
						title: "时间管理",
						file: "technician/time_manager.png",
						handle: () => {},
					},
					{
						title: "一键报警",
						file: "technician/click_alarm.png",
						handle: () => {},
					},
				],
				order_list: [
					{
						title: "待接单",
						file: "technician/wait_take.png",
						num: 0,
						status: 2,
					},
					{
						title: "待服务",
						file: "technician/wait_service.png",
						num: 0,
						status: 3,
					},
					{
						title: "服务中",
						file: "technician/serving.png",
						num: 0,
						status: 4,
					},
					{
						title: "已完成",
						file: "technician/order_finish.png",
						num: 0,
						status: 7,
					},
					{
						title: "取消/拒单",
						file: "technician/order_cancel.png",
						num: 0,
					},
				],
				tool_list: [
					{
						title: "等级管理",
						file: "technician/level_manager.png",
						handle: () => {},
					},
					{
						title: "储值返佣",
						file: "technician/czfy.png",
						handle: () => {},
					},
					{
						title: "分成明细",
						file: "technician/fcmx.png",
						handle: () => {
							// uni.navigateTo({
							// 	url: "/subPages/technician/details/breakdownOfDivision",
							// });
						},
					},
					{
						title: "车费明细",
						file: "technician/cfmx.png",
						handle: () => {
							// uni.navigateTo({
							// 	url: "/subPages/technician/details/fareDivision",
							// });
						},
					},
					{
						title: "差评申诉",
						file: "technician/cpss.png",
						handle: () => {},
					},
					{
						title: "屏蔽用户",
						file: "technician/pbyh.png",
						handle: () => {},
					},
					{
						title: "提现记录",
						file: "technician/txjl.png",
						handle: () => {},
					},
					{
						title: "切换用户端",
						file: "technician/qhyhd.png",
						handle: () => {
							uni.$off("onTechnicianShow");
							this.$stoarge.setUserStatus(1);
							this.$emit("update:userStatus", 1);
						},
					},
				],
			};
		},
		mounted() {
			uni.$on("onTechnicianShow", () => {
				this.getData();
			});
			this.getData();
		},
		methods: {
			// 认证
			onAuthen() {
				if (this.dataInfo.authentication == 0) {
					this.showModal = true;
				}
			},
			onAuth() {
				this.showModal = false;
				uni.navigateTo({
					url: "/subPages/technician/recruit/authentication",
				});
			},
			onCancel() {
				this.showModal = false;
				uni.$off("onTechnicianShow");
				this.$stoarge.setUserStatus(1);
				this.$emit("update:userStatus", 1);
			},
			// 服务收入
			onService() {
				uni.navigateTo({
					url: "/subPages/technician/recruit/serviceRevenue",
				});
			},
			onCash() {
				uni.navigateTo({
					url: "/subPages/technician/recruit/cash",
				});
			},
			/**
			 * 订单
			 */
			onOrderList(item, index) {
				if (index === 4) {
				} else {
					uni.navigateTo({
						url: `/subPages/order/service_order_list?status=${item.status}`,
					});
				}
			},
			/**
			 * 网络请求
			 */
			getData() {
				getTechnicianInfo().then((res) => {
					this.dataInfo = res.data;

					this.order_list[0].num = res.data.waiting_order;
					this.order_list[1].num = res.data.service_order;

					// if (this.dataInfo.authentication == 0) {
					// 	return;
					// 	this.showModal = true;
					// }
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		--bottom-height: 120rpx;
		--limit-num: 1;
		position: relative;
		z-index: 1;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;

		.wrap-info {
			margin-top: 30rpx;
			width: 100%;

			.avatar {
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			.info {
				margin-left: 20rpx;
				flex: 1;
				overflow: hidden;

				.nickname {
					width: 100%;
					overflow: hidden;
					color: $bg-text-color;

					> image {
						margin-left: 12rpx;
						width: 10rpx;
						height: 16rpx;
					}
				}
				.authen-bg {
					margin-top: 25rpx;
					width: 100%;
					white-space: nowrap;

					.authen-item {
						display: inline-block;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						padding: 0 12rpx;
						border: 2rpx solid $bg-text-color;
						color: $bg-text-color;
						border-radius: 10rpx;
						overflow: hidden;
						margin-right: 15rpx;

						&:last-child {
							margin-right: 0rpx;
						}
					}
				}
			}
			.right {
				margin-left: 10rpx;
				height: 112rpx;
				overflow: hidden;

				.switch-img {
					width: 84rpx;
					height: 36rpx;

					> image {
						width: 100%;
						height: 100%;
					}
				}
				.name {
					margin-top: 15rpx;
					color: white;
				}
			}
		}

		.address-bg {
			margin-top: 28rpx;
			width: 100%;
			height: 80rpx;
			background-color: rgba($color: #ffffff, $alpha: 0.41);
			border-radius: 10rpx;
			overflow: hidden;
			padding: 0 20rpx;
			box-sizing: border-box;

			.img {
				width: 24rpx;
				height: 24rpx;
			}
			.current {
				margin-left: 6rpx;
				color: white;
			}
			.address {
				margin-left: 10rpx;
				flex: 1;
				overflow: hidden;
				color: white;
			}
		}

		.options-bg {
			margin-top: 30rpx;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;

			.options-item {
				flex: 1;
				overflow: hidden;

				> view {
					width: 100%;
					height: 100%;

					.img {
						width: 52rpx;
						height: 52rpx;
					}
					.name {
						margin-top: 15rpx;
						color: $bg-text-color;
					}
				}
			}
		}

		.income-bg {
			margin-top: 30rpx;
			width: 100%;
			overflow: hidden;
			flex-wrap: wrap;

			.income-item {
				width: 340rpx;
				height: 132rpx;
				border-radius: 10rpx;
				background-color: white;
				overflow: hidden;
				padding: 0 18rpx;
				box-sizing: border-box;
				position: relative;

				.name {
					color: #666666;
				}
				.num {
					margin-top: 20rpx;
					color: $theme-color;

					.symbol {
						margin-right: 5rpx;
					}
				}
			}
			.withdraw-bg {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 120rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: $theme-color;
				color: $bg-text-color;
				border-top-left-radius: 10rpx;
				border-bottom-left-radius: 10rpx;
				overflow: hidden;
			}
		}

		.wrap-order-bg {
			margin-top: 20rpx;
			width: 100%;
			background-color: white;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.order-title {
				color: $title-color;
			}

			.order-list {
				margin-top: 10rpx;
				width: 100%;
				overflow: hidden;
				white-space: nowrap;

				.order-item {
					padding-top: 20rpx;
					flex: 1;
					display: inline-block;
					overflow: hidden;

					> view {
						width: 100%;
						height: 100%;

						.file {
							width: 52rpx;
							height: 52rpx;
							position: relative;

							.img {
								width: 52rpx;
								height: 52rpx;
							}

							.num {
								position: absolute;
								right: 0rpx;
								top: -8rpx;
								height: 22rpx;
								line-height: 22rpx;
								text-align: center;
								padding: 0 6rpx;
								color: white;
								border-radius: 11rpx;
								overflow: hidden;
								background-color: #f91600;
							}
						}
						.title {
							margin-top: 14rpx;
							color: $title-color;
						}
					}
				}
			}
		}

		.wrap-tool {
			margin-top: 20rpx;
			width: 100%;
			background-color: white;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 30rpx 20rpx 0rpx;
			box-sizing: border-box;

			.tool-title {
				color: $title-color;
			}

			.tool-list {
				margin-top: 40rpx;
				width: 100%;
				overflow: hidden;
				flex-wrap: wrap;

				.tool-item {
					width: 25%;
					overflow: hidden;
					margin-bottom: 30rpx;

					.img {
						width: 64rpx;
						height: 64rpx;
					}

					.title {
						margin-top: 15rpx;
						color: $title-color;
					}
				}
			}
		}
	}
</style>
